<template>

  <div fluid grid-list-md class="agent-query-container">
    <v-container fluid fill-height>

    <v-layout justify-center align-start row wrap>
      <v-flex xs12 md12>
        <v-btn color="green darken-1" dark @click="dialog = true">
          <span class="mx-1">添加英雄</span>
          <v-icon color="white">add</v-icon>
        </v-btn>
      </v-flex>
      <v-flex text-xs-center md12 xs12>
        <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.realName }}</td>
            <!-- <td class="text-xs-center subheading">{{ props.item.nickname }}</td> -->
            <!-- <td class="text-xs-center subheading">{{ props.item.heroType | HeroType }}</td> -->
            <td class="text-xs-center subheading">
              <!-- {{ props.item.skillList ? props.item.skillList.map((item)=>(item.skillName)).join(' - ') : '' }} -->
              <v-avatar size="36" tile v-for="(item, i) of props.item.skillList" :key="i">
                  <img :src="item ? item.skillUrl: ''" alt="">
                </v-avatar>
            </td>
            <!-- <td class="text-xs-center subheading">{{ props.item.isFress === 1 ? '是' : '否'}}</td> -->
            <td class="text-xs-center subheading">
              <!-- {{ props.item.skillList ? props.item.skillList.map((item)=>(item.skillName)).join(' - ') : '' }} -->
              <v-avatar size="36" tile v-for="(item, i) of props.item.equipmentList" :key="i">
                  <img :src="item ? item.equUrl: ''" alt="">
                </v-avatar>
            </td>
              <td class="text-xs-center subheading">
              <v-avatar size="36" tile v-for="(item, i) of props.item.insList" :key="i">
                  <img :src="item ? item.insUrl : ''" alt="">
                </v-avatar>
            </td>
            <td class="text-xs-center">
              <!-- <v-btn flat round dark color="red darken-1" class="mx-1" @click="gotoEpigraph(props)">
                <span class="mx-1">铭文</span>
                <v-icon color="red darken-1">star</v-icon>
              </v-btn> -->
              <!-- <v-btn
                flat
                round
                dark
                color="green darken-1"
                class="mx-1"
                @click="gotoEquipment(props)"
              >
                <span class="mx-1">出装</span>
                <v-icon color="green darken-1">android</v-icon>
              </v-btn> -->
              <v-btn flat round dark color="blue darken-1" class="mx-1" @click="gotoSkills(props.item)">
                <span class="mx-1">技能</span>
                <v-icon color="blue darken-1">assignment</v-icon>
              </v-btn>
              <v-btn flat round dark color="green darken-1" class="mx-1" @click="relateEquipment(props.item)">
                <span class="mx-1">装备</span>
                <v-icon color="green darken-1">android</v-icon>
              </v-btn>
              <v-btn flat round dark color="red darken-1" class="mx-1" @click="relateIns(props.item)">
                <span class="mx-1">铭文</span>
                <v-icon color="red darken-1">gamepad</v-icon>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">请添加英雄数据</span>
            </div>
          </template>
        </v-data-table>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" persistent max-width="720px">
      <v-card>
        <v-card-title>
          <span class="headline">添加英雄</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md5>
                <v-text-field label="英雄名称" required v-model="editItem.realName"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md5>
                <v-text-field label="英雄别称" required v-model="editItem.nickname"></v-text-field>
              </v-flex>
                            <v-flex xs12 sm4 md5>
                <v-select v-model="editItem.heroType" :items="heroTypeItems" label="英雄类型" required></v-select>
              </v-flex>
              <v-flex xs12 sm4 md5>
                <v-select v-model="editItem.isFree" :items="weekfreeItems" label="是否周免" required></v-select>
              </v-flex>
              <v-flex xs12 sm4 md5>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>英雄头像</span>
                  <input
                    @change="headImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    class="file-input"
                  >
                </v-btn>
                <img v-show="headImage" :src="headImage" class="dialog-image" alt="" srcset="">
                <!-- <span>{{headUrlName}}</span> -->
              </v-flex>
              <v-flex xs12 sm4 md5>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>英雄大图</span>
                  <input
                    @change="picImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    class="file-input"
                  >
                </v-btn>
                <img v-show="picImage" :src="picImage" class="dialog-image" alt="" srcset="">
                
                <!-- <span>{{picUrlName}}</span> -->
              </v-flex>
              <v-flex xs12 sm4 md5>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>英雄图片</span>
                  <input
                    @change="cardImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    class="file-input"
                  >
                </v-btn>
                <img v-show="cardImage" :src="cardImage" class="dialog-image" alt="" srcset="">
                <!-- <span>{{cardUrlName}}</span> -->
              </v-flex>

            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="skillDialog" persistent max-width="1410px">
      <v-card>
        <v-card-title>
          <span class="headline">技能</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="技能名称" required v-model="skillItem.skillName"></v-text-field>
              </v-flex>

              <v-flex xs12 sm4>
                <v-select v-model="skillItem.skillLevel" :items="skillLevelItems" label="技能等级" required></v-select>
              </v-flex>

              <v-flex xs12 sm4>
                <v-text-field label="冷却值" required v-model="skillItem.coolingValue"></v-text-field>
              </v-flex>

              <v-flex xs12 sm4>
                <v-text-field label="消耗" required v-model="skillItem.consumValue"></v-text-field>
              </v-flex>
              
              <v-flex xs12 sm6 md4>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>技能图</span>
                  <input
                    @change="skillImageHandler"
                    name="skillUrl"
                    type="file"
                    accept="image/jpg;image/png"
                    ref="skillImage"
                    class="file-input"
                  >
                </v-btn>
                <img v-show="skillImage" :src="skillImage" class="dialog-image" alt="" srcset="">
                <!-- <span>{{skillUrlName}}</span> -->
              </v-flex>

              <v-flex xs12 sm6 md4>
                <v-textarea label="技能说明"  required v-model="skillItem.remark"></v-textarea>
              </v-flex>

            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="skillDialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmSkillDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="equipDialog" persistent max-width="1312px">
      <v-card>
        <v-card-title>
          <span class="headline">装备关系表</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap justify-start align-start>
              <v-flex xs2 md2 sm2 v-for="(item, i) of equipList" :key="i" d-flex align-center>
                <v-checkbox v-model="selecteSkillList" :label="EquipType[item.equType] + ' - ' +item.equName" :value="item" multiple :color="colors[item.equType]">
                </v-checkbox>
                <img :src="item.equUrl" alt="" class="equ-image">
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="equipDialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmEquipDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="insDialog" persistent max-width="1312px">
      <v-card>
        <v-card-title>
          <span class="headline">铭文关系表</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap justify-start align-start>
              <v-flex xs2 md2 sm2 v-for="(item, i) of insList" :key="i" d-flex align-center>
                <v-checkbox v-model="selecteInsList" :label="item.insName" :value="item" multiple :color="colors[item.insType]">
                </v-checkbox>
                <v-avatar tile>
                  <img :src="item.insUrl" alt="" class="ins-image">
                </v-avatar>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="insDialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmInsDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    </v-container>
  </div>
</template>

<script>
import { hero, equip, ins } from "../api/request";

export default {
  data: () => ({
    editItem: {},
    dialog: false,
    skillDialog: false,
    equipDialog: false,
    headers: [
      { text: "英雄名称", value: "lftid", align: "center", sortable: false },
      // { text: "头像", value: "headUrl", align: "center", sortable: false },
      // { text: "大图", value: "headUrl", align: "center", sortable: false },
      // { text: "英雄别称", value: "headUrl", align: "center", sortable: false },
      // { text: "英雄类型", value: "nickname", align: "center", sortable: false },
      { text: "技能", value: "nickname", align: "center", sortable: false },
      // { text: "是否周免", value: "nickname", align: "center", sortable: false },
      { text: "出装", value: "nickname", align: "center", sortable: false },
      { text: "铭文", value: "nickname", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    tableData: [],
    heroTypeItems: [
      {
        text: "坦克",
        value: 1
      },
      {
        text: "战士",
        value: 2
      },
      {
        text: "刺客",
        value: 3
      },
      {
        text: "法师",
        value: 4
      },
      {
        text: "射手",
        value: 5
      },
      {
        text: "辅助",
        value: 6
      }
    ],
    skillLevelItems: [
      {
        text: "被动",
        value: 0
      },
      {
        text: "主升",
        value: 1
      },
      {
        text: "副升",
        value: 2
      },
      {
        text: "有大点大",
        value: 3
      }
    ],
    weekfreeItems: [
      {
        text: "是",
        value: 1
      },
      {
        text: "否",
        value: 0
      }
    ],
    headUrlName: "",
    picUrlName: "",
    cardUrlName: "",
    cardImage: "",
    headImage: "",
    skillImage: "",
    picImage: "",
    skillItem : {},
    skillUrlName: '',
    equipList: [],
    heroEquipRel: {
      
    },
    selecteSkillList: [],
    selecteInsList: [],
    colors: ['blue', 'green', 'red', 'indigo', 'orange'],
    EquipType: {},
    InsType: {},
    relDialog: false,
    insDialog: false,
    insList: []

  }),
  mounted() {
    this.getHeroList();
    this.getEquipList();
    this.getInsList();
    this.EquipType = window.EquipType;
    this.InsType = window.InsType;
  },
  filters: {

  },
  methods: {
    gotoEpigraph(item) {
      
    },
    gotoEquipment(item) {

    },
    gotoSkills(item) {
      this.editItem = item;
      console.log(this.editItem)
      this.skillDialog = true;
    },
    relateEquipment(item){
      this.editItem = item;
      console.log(this.editItem)
      this.equipDialog = true;
      
    },
    relateIns(item){
      this.editItem = item;
      console.log(this.editItem)
      this.insDialog = true;
    },
    confirmDialog() {
      this.uploadHero();
    },
    confirmSkillDialog() {
      this.uploadSkill();
    },
    confirmEquipDialog() {
      this.uploadHeroEquipRel();
      // console.log(this.editItem, this.selecteSkillList)
    },
    confirmInsDialog() {
      this.uploadHeroInsRel();
      // console.log(this.editItem, this.selecteSkillList)
    },
    uploadHero() {
      let form = new FormData();
      _.keys(this.editItem).forEach((key, i) => {
        form.append(key, this.editItem[key]);
      });
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      hero.uploadHero.r(form, config).then(({ data }) => {
        console.log('uploadHero',data);
        this.dialog = false;
        if (data.result === 0) {
          this.getHeroList();
          this.editItem = {}
        } else {
          alert(data.message);
        }
      });
    },
    uploadSkill() {
      let form = new FormData();
      _.keys(this.skillItem).forEach((key, i) => {
        form.append(key, this.skillItem[key]);
      });
      form.append('heroId', this.editItem.id) ;
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };

      hero.uploadSkill.r(form).then(({ data }) => {
        this.skillDialog = false;
        this.getHeroList();
        this.skillItem = {}
        console.log('uploadSkill',data);
      });

      
    },
    uploadHeroEquipRel() {
      let equId = []
      this.selecteSkillList.forEach(item=>{
        equId.push(item.id)
      })
      let params = {
        equId,
        heroId: this.editItem.id
      }
      hero.uploadHeroEquipRel.r(params).then(({ data }) => {
        // this.tableData = data.data.dataList;
        this.equipDialog = false;
        this.getHeroList();
        this.selecteSkillList = [];
        alert(data.message);
        console.log('uploadHeroEquipRel',data);
      });
    },
    uploadHeroInsRel() {
      let insId = []
      this.selecteInsList.forEach(item=>{
        insId.push(item.id)
      })
      let params = {
        insId,
        heroId: this.editItem.id
      }
      hero.uploadHeroInsRel.r(params).then(({ data }) => {
        // this.tableData = data.data.dataList;
        this.insDialog = false;
        this.getHeroList();
        this.selecteInsList = []
        alert(data.message);
        console.log('uploadHeroInsRel',data);
      });
    },
    getHeroList() {
      let opt = {
        // offset: 0,
        // limit: 10
      };
      hero.getHeroList.r(opt).then(({ data }) => {
        this.tableData = data.data.dataList;
        console.log('getHeroList',data);
      });
    },
    getEquipList() {
      let opt = {
        // offset: 0,
        // limit: 10
      };
      equip.getEquipList.r(opt).then(({ data }) => {
        this.equipList = data.data.dataList;
        console.log('getEquipList',data);
      });
    },
    getInsList() {
      let opt = {
        // offset: 0,
        // limit: 10
      };
      ins.getInsList.r(opt).then(({ data }) => {
        this.insList = data.data.dataList;
        console.log('getInsList',data);
      });
    },
    headImageHandler(ev) {
      let file = ev.target.files[0];
      this.editItem.headUrl = file;
      this.headUrlName = file.name;
      let fr = new FileReader();
      let that = this;
      fr.onload = (res) => {
        this.headImage = res.target.result;
      }
      fr.readAsDataURL(file);
    },
    picImageHandler(ev) {
      let file = ev.target.files[0];
      this.editItem.pictureUrl = file;
      this.picUrlName = file.name;
      let fr = new FileReader();
      let that = this;
      fr.onload = (res) => {
        this.picImage = res.target.result;
      }
      fr.readAsDataURL(file);
    },
    cardImageHandler(ev) {
      let file = ev.target.files[0];
      this.editItem.cardUrl = file;
      this.cardUrlName = file.name;
      let fr = new FileReader();
      let that = this;
      fr.onload = (res) => {
        this.cardImage = res.target.result;
      }
      fr.readAsDataURL(file);
    },
    skillImageHandler(ev) {
      let file = ev.target.files[0];
      this.skillItem.skillUrl = file;
      this.skillUrlName = file.name;
      let fr = new FileReader();
      let that = this;
      fr.onload = (res) => {
        this.skillImage = res.target.result;
      }
      fr.readAsDataURL(file);
    }
  }
};
</script>
<style lang="less" scoped>
.equ-image {
  width: 30px;
  height: 46px;
}
.ins-image {
  width: 60%;
  height: 100%;
}
</style>